<template>
	<div class="box">
		<span>{{ state.name }}</span>
		<span @click="upPrent">执行子组件</span>
	</div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';

const props = defineProps({
	obj: Object,
});
console.log(props.obj);
const state = reactive({
	name: '测试名称',
});
const upName = () => {
	state.name = '替换名称';
};

const emit = defineEmits(['upPrent']);
const upPrent = () => {
	emit('upPrent', '传递的参数');
};
// 暴漏父组件要执行的函数
defineExpose({
	upName,
});
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	align-items: center;
	span {
		margin-right: 20px;
	}
}
</style>